<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>哥哥</span>
    <div class="kangbazi" id="no1">
        hello 
        <p>你好</p>
        <!-- 我是注释 -->
        <p>世界</p>
        world
    </div>
    <span>弟弟</span>
    <script>
        // 获取节点  

        // 获取元素节点:
        //  非常规 
        //   html  document.documentElement
        //   body  document.body
        //   head  document.head

        //   常规
        //    getElementById
        //    getElementsByClassName
        //    getElementsByName
        //    getElementsByTagName
        //    querySelector
        //    querySelector
        //    querySelectorAll



        // 获取节点 (包含但不局限于元素节点)
        // 元素 文本 注释  都有可能  

        // 1.childNodes 
            //  节点.childNodes
            //  结果一个伪数组 该节点的所有子一级节点
        // 2.children
            //  节点.children
            //  结果一个伪数组 该节点的所有子一级元素节点 只有元素节点
        // 3.firstChild
            //  节点.firstChild
            //  该节点的第一个子节点
        // 4.firstElementChild
             // 节点.firstElementChild
            //  该节点的第一个子元素节点
        // 5.lastChild
            // 节点.lastChild
            //  该节点的最后一个子节点
        // 6.lastElementChild
            // 节点.lastElementChild
            //  该节点的最后一个子元素节点
        // 7. previousSibling
            // 节点.previousSibling
            //  该节点的同级别前一个节点
        // 8. previousElementSibling
            // 节点.previousElementSibling
            //  该节点的同级别前一个元素节点
        // 9. nextSibling
            // 节点.nextSibling
            //  该节点的同级别后一个节点
        // 10.nextElementSibling
            // 节点.nextSibling
            //  该节点的同级别后一个元素节点
        // 11.parentNode
            // 节点.parentNode
            //  该节点的父节点
        // 12.parentElement
            // 节点.parentElement
            //  该节点的父元素节点
        // 13.attributes
            // 节点.attributes
            //  该节点所有属性节点




        // 获取 div 元素

        var divEle = document.querySelector('#no1');
        // console.log(divEle);

        console.log(divEle.childNodes); // 子一级节点  元素 注释 文本

        // console.log(divEle.children);// 两个 p标签

        // console.log(divEle.firstChild);
        // console.log(divEle.firstElementChild);

        // console.log(divEle.lastChild);
        // console.log(divEle.lastElementChild);

        // console.log(divEle.previousSibling);
        // console.log(divEle.previousElementSibling);



        // console.log(divEle.nextSibling);
        // console.log(divEle.nextElementSibling);


        // console.log(divEle.parentNode);
        // console.log(divEle.parentElement);



        // console.log(divEle.attributes);

    </script>
</body>
</html>